﻿
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>AI销售</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
    <link rel="stylesheet" type="text/css" href="../css/radar.css">
    <link rel="stylesheet" href="../plugins/dropload/css/mescroll.min.css">
    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../plugins/weui/js/weui.min.js"></script>
    <script type="text/javascript" src="../plugins/echarts/js/echarts.min.js"></script>
    <script src="../plugins/dropload/js/mescroll.min.js"></script>
    <script src="../js/base.js"></script>
</head>
<body>
<div class="container">
    <div class="weui-flex">
        <div class="weui-flex__item navbar">
            <a href="bossRadarIndex.html">
                <div class="placeholder">时间</div>
                <div class="border"></div>
            </a>
        </div>
        <div class="weui-flex__item navbar">
            <a href="bossRadarSecond.html">
                <div class="placeholder">行为</div>
                <div class="border"></div>
            </a>
        </div>
        <div class="weui-flex__item navbar active_navbar">
            <a href="bossRadarThree.html">
                <div class="placeholder">人</div>
                <div class="border" style="display:block"></div>
            </a>
        </div>
    </div>
    <div class="weui-tab__panel">
        <div>
            <div class="tongji">
                <div class="tongji-lft" style="padding-left:20px">
                    7天内被查看的行为统计
                </div>
                <img src="../images/pk/50.png" alt="" style="padding-right:20px" class="choose-time">
            </div>
            <!--滑动区域-->
            <div id="mescroll" class="mescroll">
                <!--展示上拉加载的数据列表-->
                <div class="weui-cells-other" style="background-color: #FAFAFA;">
                </div>
            </div>
        </div>
    </div>

    <div class="weui-tabbar tabbar">
        <a href="bossRadarIndex.html" class="weui-tabbar__item">
            <img src="../images/tabbar/9.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label" style="color:#FD4D01;">AI销售</p>
        </a>
        <a class="weui-tabbar__item a_msg_list">
            <img src="../images/tabbar/12.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">消息</p>
        </a>
        <a href="contactPerson.html" class="weui-tabbar__item">
            <img src="../images/tabbar/14.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">客户</p>
        </a>
        <a href="friendState.html" class="weui-tabbar__item">
            <img src="../images/tabbar/16.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">商圈</p>
        </a>
        <a href="myself.html" class="weui-tabbar__item">
            <img src="../images/tabbar/18.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">我</p>
        </a>
    </div>
</div>
<div id="dialog1" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd">
            <strong class="weui-dialog__title">选择时间段</strong>
        </div>
        <div class="weui-dialog__bd">
            <div class="bd_input">
                <span id="startTime" style="margin-left:5px;"></span>
                <img src="../images/pk/50.png" alt="" onclick="startTime()">
            </div>
            <span class="bd_span">至</span>
            <div class="bd_input">
                <span id="endTime" style="margin-left:5px;"></span>
                <img src="../images/pk/50.png" alt="" onclick="endTime()">
            </div>
        </div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" onclick="closeTime()">取消</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="okTime()">确定</a>
        </div>
    </div>
</div>
<script type="text/javascript">
    var startTime1 = null;
    var mescroll = null;
    $(function () {
        //加载数据，分页
        mescroll = new MeScroll("mescroll", {
            down: {
                auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
                use: false
            },
            up: {
                page: {
                    num: 0, //当前页码,默认0,回调之前加1,即callback(page)从1开始;
                    size: 10, //每页数据的数量;
                    time: null //加载第一页数据服务器返回的时间 (可空); 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
                    , where: ''//条件
                },
                offset: 50, //列表滚动到距离底部小于100px,即可触发上拉加载的回调
                auto: true, //初始化完毕,是否自动触发上拉加载的回调
                isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
                callback: load, //上拉加载的回调
                autoShowLoading: true
            }
        });

        loadBtn();       
    });
    
    function load(page) {
        var html = "";
        if (page.where != '') $('.weui-cells-other').html('');

        ajaxGet(siteApiList.RadarManList + '?page=' + page.num + '&staffId=' + staffId + page.where, function (data) {
            if (!isJsonSuccess(data)) {
                mescroll.endErr();
                return;
            } else {
                mescroll.endSuccess(data.Data == null ? 0 : data.Data.length);

                $('.weui-cells-other').append(function () {
                    var arr = [];
                    $.each(data.Data, function (index, item) {
                        arr.push('<div class="weui-cell-box" data-staffid="' + item.staffId + '" data-uid="' + item.uid + '" ><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><div class="avatar" style="padding-bottom:10px;"><img class="avatar-img" src="' + item.avatar + '" alt=""></div></div><div class="weui-cell__bd"><p style="margin-left:10px; ">' + item.nickname + '跟你在名片上互动了' + item.num + '次</p></div><div class="weui-cell__ft"></div></a><div class="line"></div><div id="main' + item.staffId + '" class="box-pic" style="height:300px"></div></div>');
                    });
                    return arr.join('');
                });
            }
        })
    }


    //加载数据
    function loadChartData(data_uid, dataid) {
        ajaxGet(siteApiList.TimeDetailList + '?Uid=' + data_uid + '&staffid=' + dataid, function (data) {
            var Check0 = 0, Check1 = 0, Check2 = 0, Check3 = 0, Check4 = 0, Check5 = 0, Check6 = 0, Check7 = 0, Check8 = 0, Check9 = 0;
            $.each(data.Data, function (index, item) {
                if (item.actionType == 0)
                    Check0 += item.num;
                else if (item.actionType == 1)
                    Check1 += item.num;
                else if (item.actionType == 2)
                    Check2 += item.num;
                else if (item.actionType == 3)
                    Check3 += item.num;
                else if (item.actionType == 4)
                    Check4 += item.num;
                else if (item.actionType == 5)
                    Check5 += item.num;
                else if (item.actionType == 6)
                    Check6 += item.num;
                else if (item.actionType == 7)
                    Check7 += item.num;
                else if (item.actionType == 8)
                    Check8 += item.num;
                else if (item.actionType == 9)
                    Check9 += item.num;
            });
            var art = [['source', 'amount', 'product']];
            if (Check0 != 0)
                art.push(new Array(10, Check0, '查看商品'));
            if (Check1 != 0)
                art.push(new Array(20, Check1, '查看官网'))
            if (Check2 != 0)
                art.push(new Array(30, Check2, '复制微信'))
            if (Check3 != 0)
                art.push(new Array(40, Check3, '转发名片'))
            if (Check4 != 0)
                art.push(new Array(50, Check4, '查看名片'))
            if (Check5 != 0)
                art.push(new Array(60, Check5, '查看动态'))
            if (Check6 != 0)
                art.push(new Array(70, Check6, '咨询产品'))
            if (Check7 != 0)
                art.push(new Array(80, Check7, '保存电话'))
            if (Check8 != 0)
                art.push(new Array(90, Check8, '觉得靠谱'))
            if (Check9 != 0)
                art.push(new Array(100, Check9, '拨打电话'))

            loadChart(dataid, art);
        });
    }

    //加载图表
    function loadChart(dataid, art) {
        echarts.init(document.getElementById('main' + dataid)).setOption({
            dataset: {
                source: art
            },
            grid: {
                containLabel: true
            },
            axisLine: {
                show: false
            },
            xAxis: {
                show: false,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }, //是否显示刻度线
                name: ''
            },
            yAxis: {
                show: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }, //是否显示刻度线
            },
            visualMap: {
                show: false,
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#F0C370', '#678FFE']
                }
            },
            series: [{
                type: 'bar',
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: '#F0C370'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',//文字标点的位置
                        color: "#151D32" //标点文字颜色
                    }
                },
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'product'
                }

            }]
        });
    }

    function loadBtn() {
        //聊天会话链接
        $(".a_msg_list").click(function () {
            toUrl(siteUrlList.ImMessageList + "?uid=" + userid);
        });

        var index;
        $('.placeholder').on('click', function () {
            index = $(this).parents('.weui-flex__item').index()
            $(this).parents('.weui-flex__item').addClass('active_navbar').siblings().removeClass('active_navbar');
            $(this).parents().children('.border').css('display', 'block').parents().siblings().children('.border').css(
                'display', 'none')
            $('.weui-tab__panel').children().eq(index).css('display', 'block').siblings().css('display', 'none')
        });
        $('.choose-time').on('click', function () {
            $('#dialog1').css('display', 'block');
            /* Act on the event */
        });

        $('body').on('click', '.weui-cell-box', function () {
            var dataid = $(this).attr('data-staffid');
            var data_uid = $(this).attr('data-uid');
            $(this).children('.box-pic').toggle();
            $(this).siblings().children('.box-pic').css('display', 'none')

            if ($('#main' + dataid).attr("show-detail") == "1") {
                $('#main' + dataid).attr("show-detail", "0");
                return;
            }
            $('#main' + dataid).attr("show-detail", "1");

            //加载图表
            loadChartData(data_uid, dataid)
        });

    }

    function startTime() {
        $('#startTime').html("")
        $('#endTime').html("")
        weui.datePicker({
            start: '1990-01-01',
            end: new Date().getFullYear(),
            // onChange: function(result) {
            //
            // },
            onConfirm: function (result) {
                var startTime = [];
                for (var i = 0; i < result.length; i++) {
                    startTime.push(result[i].value)
                }
                startTime = startTime.join("-");
                startTime1 = startTime;
                $('#startTime').html(startTime)
            }
        });
    };

    function endTime() {
        weui.datePicker({
            start: startTime1,
            end: new Date().getFullYear(),
            // onChange: function(result) {
            //
            // },
            onConfirm: function (result) {
                var endTime = [];
                for (var i = 0; i < result.length; i++) {
                    endTime.push(result[i].value)
                }
                endTime = endTime.join("-");
                $('#endTime').html(endTime)
            }
        });
    };

    function closeTime() {
        $('#dialog1').css('display', 'none');
    }

    function okTime() {
        closeTime();
        var startTime = $('#startTime')[0].innerText;
        var endTime = $('#endTime')[0].innerText;
        var page = {num:0,size:10,time:null,where:'&startTime=' + startTime + '&endTime=' + endTime};
        load(page);
    }

</script>
</body>

</html>